import React, { useState } from "react";
import city from "../../city.json";
import { IndexBar, Cell, Search } from "react-vant";

const Index = () => {
  const [isSearch, setIsSearch] = useState(false);
  const search = (value: string) => {
    setIsSearch(true);
    const list: string[] = [];
    city.forEach((v) =>
      v.cityList.forEach((v) => {
        if (v.includes(value)) {
          list.push(v);
        }
      })
    );
    setList(list);
  };
  const [list, setList] = useState<string[]>([]);
  return (
    <div>
      <Search onSearch={search} onClear={() => setIsSearch(false)}></Search>
      {isSearch ? (
        <div>
          {list.map((v, i) => {
            return <Cell title={v} key={i} />;
          })}
        </div>
      ) : (
        <IndexBar>
          {city.map((item, i) => (
            <div key={i}>
              <IndexBar.Anchor index={item.code} />
              {item.cityList.map((v, i) => {
                return <Cell title={v} key={i} />;
              })}
            </div>
          ))}
        </IndexBar>
      )}
    </div>
  );
};

export default Index;
